<template>
<!-- 歌手页面 -->
  <div class="singer-data">
    <music-list :songs='songs' :pic='pic' :title='title' :loading ='loading'
    ></music-list>
  </div>
</template>
<script>
import { getSingerDetail } from '../service/singer'
import { processSongs } from '../service/song'
import MusicList from '../components/music-list/music-list.vue'
import storage from 'good-storage'
import { SINGER_KEY } from '../assets/js/constant'
export default {
  name: 'singer-data',
  data() {
    return {
      songs: [],
      loading: true
    }
  },
  props: {
    singer: Object
  },
  computed: {
    computedSinger() { // 判断数据是否存在 不存在去session找数据
      let ret = null
      const singer = this.singer
      if (singer) {
        ret = singer
      } else {
        const cachedSinger = storage.session.get(SINGER_KEY)
        if (cachedSinger && cachedSinger.mid === this.$route.params.id) {
          ret = cachedSinger
        }
      }
      return ret
    },
    pic() {
      const singer = this.computedSinger
      return singer && singer.pic
    },
    title() {
      const singer = this.computedSinger
      return singer && singer.name
    }
  },
  components: {
    MusicList
  },
  async created() {
    // 数据还是为空返回歌手列表页面
    if (!this.computedSinger) {
      const path = this.$route.matched[0].path // 第一个匹配的路径 返回的路径
      this.$router.push({
        path
      })
      return
    }
    const result = await getSingerDetail(this.computedSinger) // 先获取歌手信息图片
    this.songs = await processSongs(result.songs) // 在获取歌曲列表和播放地址
    this.loading = false
  }
}
</script>
<style lang="scss" scoped>
  .singer-data {
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: $color-background;
  }
</style>
